<template>
	<view class="e-p-20" :style="[AppSkinVar]">
		<view class="bg-white e-radius-20 e-p-l-30 e-p-r-30 e-p-t-20 e-p-b-20" id="cyb-form">
			<select name="" id="">
				<option value=""></option>
			</select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:"",
				country:[],
				form: {
					
				},
				billList:['bill_to_address_city','bill_to_address_country','bill_to_address_line1','bill_to_address_line2','bill_to_address_postal_code','bill_to_address_state','bill_to_email','bill_to_forename','bill_to_phone','bill_to_surname'],
				bill:[
					{
						name: this.$t('order.名'),
						value:'bill_to_forename',
						placeholder:this.$t('order.请输入名')
					},
					{
						name: this.$t('order.姓'),
						value:'bill_to_surname',
						placeholder:this.$t('order.请输入姓')
					},
					{
						name: this.$t('user.手机号'),
						value:'bill_to_phone',
						placeholder:this.$t('setting.请输入手机号')
					},
					{
						name: this.$t('order.账单邮件地址'),
						value:'bill_to_email',
						placeholder:this.$t('order.请输入邮件地址')
					},
					{
						name: this.$t('order.账单地址1'),
						value:'bill_to_address_line1',
						placeholder:this.$t('order.请输入账单地址1')
					},
					{
						name: this.$t('order.账单地址2'),
						value:'bill_to_address_line2',
						placeholder:this.$t('order.请输入账单地址2')
					},
					{
						name: this.$t('order.账单地址城市'),
						value:'bill_to_address_city',
						placeholder:this.$t('order.请输入账单地址城市')
					},
					{
						name: this.$t('order.账单地址州'),
						value:'bill_to_address_state',
						placeholder:this.$t('order.请输入账单地址州')
					},
					{
						name: this.$t('order.账单地址国家'),
						value:'bill_to_address_country',
						placeholder:this.$t('order.请输入账单地址国家'),
						type:'select'
					},
					{
						name: this.$t('order.账单地址邮政编码'),
						value:'bill_to_address_postal_code',
						placeholder:this.$t('order.请输入账单地址邮政编码')
					},
				]
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.init()
			})
		},
		methods: {
			handleBlur(e) {
				if (e.target.id) {
					let billDate = uni.getStorageSync('billDate') || {}
					const obj = new Object()
					obj[e.target.id] = e.target.value
					billDate = {
						...billDate,
						...obj
					}
					uni.setStorageSync('billDate',billDate)
				}
			},
			handleCreateInput(type,id,name,value) {
				const input = document.createElement('input')
				input.type = type
				input.id = id
				input.name = name
				input.value = value
				return input
			},
			handleCreateFormItem(item) {
				const billDate = uni.getStorageSync('billDate')
				let inputValue = ''
				if (billDate) {
					if (billDate.hasOwnProperty(item.value)) {
						inputValue = billDate[item.value]
					}
				}
				const label = document.createElement('div')
				label.style = `
					display:flex;
					align-items:center;
					height: 50px;
				`
				const star = document.createElement('span')
				star.innerText='*'
				star.style = `
					color:red;
					font-size:14px;
					margin-right: 5px;
				`
				label.appendChild(star)
				const name = document.createElement('span')
				name.innerText = item.name
				name.style = `
					color:#333;
					font-size:14px;
				`
				label.appendChild(name)
				const box = document.createElement('div')
				box.style = `
					height: 50px;
					border: 1px solid #EBEEF5;
					padding-left: 15px;
					display:flex;
					align-item:center;
				`
				let input
				if (item.type === 'select') {
					input = document.createElement(item.type)
					if (this.country && this.country.length) {
						for (let i = 0; i < this.country.length; i++) {
						    let optionElement = document.createElement("option")
							optionElement.value = this.country[i].value
						    optionElement.label = this.country[i].name
						    input.appendChild(optionElement)
						}
					}
				} else {
					input = document.createElement('input')
					input.onblur = this.handleBlur
				}
				input.value = inputValue
				input.name = item.value
				input.id = item.value
				input.placeholder = item.placeholder
				input.style = `
					border:none;
					outline:none;
					width: 100%
				`
				input.required = true
				box.appendChild(input)
				const formItem = document.createElement('div')
				formItem.appendChild(label)
				formItem.appendChild(box)
				return formItem
			},
			handleCreateForm() {
				const dom = document.querySelector('#cyb-form')
				dom.innerHTML = ''
				const form = document.createElement('form')
				form.action = this.action
				form.method = 'post'
				
				
				Object.keys(this.form).forEach(item => {
					if (!this.billList.includes(item)) {
						form.appendChild(this.handleCreateInput('hidden',item,item,this.form[item]))
					}
				})
				
				const screenWidth = window.innerWidth; // 屏幕宽度
				const screenHeight = window.innerHeight; // 屏幕高度
				form.appendChild(this.handleCreateInput('hidden','customer_browser_screen_height','customer_browser_screen_height',screenHeight))
				form.appendChild(this.handleCreateInput('hidden','customer_browser_screen_width','customer_browser_screen_width',screenWidth))
				
				this.bill.forEach(item => {
					form.appendChild(this.handleCreateFormItem(item))
				})
				
				const btn = document.createElement('button')
				btn.type = "submit"
				btn.innerText = this.$t('order.确认支付')
				btn.style = `
				width: 100%;
				height: 45px;
				border-radius:45px;
				background:${this.AppSkin.primary};
				border:none;
				font-size:16px;
				color:#fff;
				margin-top:30px;
				`
				form.appendChild(btn)
				dom.appendChild(form)
			},
			init() {
				
				const data = uni.getStorageSync('cybersource')
				
				if (data) {
					this.action = data.action
					this.form = data.form
					this.country = data.country
					this.handleCreateForm()
	
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.form-btn,button {
		width: 630rpx;
		height: 90rpx;
		background: #F5222D;
		border-radius: 45rpx;
	}
</style>